<template>
	<div  @longpress="long">
		<!-- 时间显示 -->
		<view v-if="showTime" class="flex align-center justify-center pt-3">
			<text class="font-sm text-light-muted">{{showTime}}</text>
		</view>
		
		<!-- 撤回消息 -->
		<view v-if="item.isremove" ref="isremove" class="flex align-center justify-center pt-1">
			<text class="font-sm text-light-muted">你撤回了一条消息</text>
		</view>
		
		<!-- 气泡内容 -->  
		<view v-if="!item.isremove" style="width: 92%;">
			<view v-if="item.user_id != 1" class="flex align-start justify-start position-relative pt-5">  
				<freeAvater size="70" :src="item.avatar"></freeAvater>
				<text v-if="hasLableClass" class="iconfont icon-zuosanjiaoxing font-md position-absolute text-white chat_left_icon"></text>
				
				<view class="bg-white rounded p-2 ml-3" :style="labelStyle" style="max-width: 500rpx;">
					<!-- 接收文字 -->
					<text v-if="item.type == 'text'" class="font-md">{{item.data}}</text>
					<!-- 接收图片 -->
					<view v-else-if="item.type === 'image'">
						<freeImage :src="item.data" @prEvmet="preview(item.data)" imageClass="rounded"/>
					</view>
					<!-- 接收表情 -->
					<view v-else-if="item.type === 'emoticon'">
						<freeImage emoticon :src="item.data" @prEvmet="preview(item.data)" imageClass="rounded"/>
					</view>
					
					<!-- 音频 -->
					<view v-else-if="item.type === 'audio'" class="flex align-center" @click="openAudio">
						<text class="font">{{item.options.time+'"'}}'</text>
						<image class="mx-1" :src="audioPlaying?'/static/audio/play.gif':'/static/audio/audio3.png'" style="width: 50rpx;height: 50rpx;"></image>
					</view>
					
					<!-- 视频 -->
					<view @click="openVideo(item.data)" v-else-if="item.type === 'video'" class="position-relative rounded">
						<freeImage @load="loadPoster" :src="item.options.poster" imageClass="rounded"/>
						<image style="width: 100rpx;z-index: 99999;transform: translate(-50%);top: 30%;left: 50%;" class="position-absolute" src="/static/video/video_play.png" mode="widthFix"></image>
					</view>
					
				</view>  
			</view>
			
			<view v-else class="flex align-start justify-end position-relative pt-5 pb-5">
				<view :class="hasLableClass?'bg-chat-item':''" class=" rounded p-2 mr-3" :style="labelStyle" style="max-width: 500rpx;">
					<!-- 发送文字 -->
					<text v-if="item.type == 'text'" class="font-md">{{item.data}}</text>
					<!-- 发送图片 -->
					<view v-else-if="item.type === 'image'">
						<freeImage :src="item.data" @prEvmet="preview(item.data)" imageClass="rounded"/>
					</view>
					<!-- 发送表情 -->
					<view v-else-if="item.type === 'emoticon'">
						<freeImage emoticon :src="item.data" @prEvmet="preview(item.data)" imageClass="rounded"/>
					</view>
					<!-- 音频 -->
					<view v-else-if="item.type === 'audio'" class="flex align-center" @click="openAudio">
						<image class="mx-1" :src="audioPlaying?'/static/audio/play.gif':'/static/audio/audio3.png'" style="width: 50rpx;height: 50rpx;"></image>
						<text class="font">{{item.options.time+'"'}}</text>
					</view>
					
					<!-- 视频 -->
					<view @click="openVideo(item.data)" v-else-if="item.type === 'video'" class="position-relative rounded">
						<freeImage @load="loadPoster" :src="item.options.poster" imageClass="rounded"/>
						<image style="width: 100rpx;z-index: 99999;transform: translate(-50%);top: 30%;left: 50%;" class="position-absolute" src="/static/video/video_play.png" mode="widthFix"></image>
					</view>
					
				</view>
				<text v-if="hasLableClass" class="iconfont icon-you font-md position-absolute chat_right_icon text-chat-item"></text>
				<freeAvater size="70" :src="item.avatar"></freeAvater>
			</view>
		</view>
	</div>
</template>

<script>
	import { mapActions } from 'vuex';
	import store from '../../store';
	import $T from '@/common/free-lib/time.js';//引入时间库
	import freeAvater from'@/components/free-ui/free-avater'//图像组件
	import freeImage from'@/components/free-ui/free-image'//图像组件
	export default {
		components:{freeAvater,freeImage},
		props:{
			item:Object,
			index:Number,
			//上一条消息的时间戳
			pretime:[String,Number]
		},
		data() {
			return {
				innerAudioContext:null,
				audioPlaying:false,
				// 默认封面宽
				poster:{
					w:100
				}
			}
		},
		computed:{
			// 获取聊天时间（相差300s内的信息不会显示时间）
			showTime(){
				return $T.getChatTime(this.item.create_time,this.pretime);
			},
			// 是否需要气泡样式
			hasLableClass(){
				return this.item.type === 'text' || this.item.type === 'audio' 
			},
			// 气泡样式
			labelClass(){
				return 
			},
			labelStyle(){
				if(this.item.type === 'audio'){
					let time = this.item.options.time || 0
					let width = parseInt(time)/(60/500)
					width = width < 150 ? 150 : width
					return `width:${width}rpx`
				}
			},
			//短视频封面图标位置
			posterIconStyle(){
				let w = this.poster.w/2 - 140
				return `left:${this.poster.w/2}px;top:100px`
			}
		},
		mounted() {
			if(this.item.type === 'audio'){
				this.audioOn(this.onPlayAudio())
			};
			//监听是否撤回消息 nvue 值支持  weex
			this.$watch('item.isremove',(newVal,oldVal)=>{
				if(newVal){
					
				}
			})
		},
		// 组件销毁
		destroyed(){
			if(this.item.type === 'audio'){
				this.audioOff(this.onPlayAudio())
			};
			//停止音频播放
			if(this.innerAudioContext){
				this.innerAudioContext.destroy()
				this.innerAudioContext = null
			}
		},
		methods: {
			//视频播放
			openVideo(e){
				uni.navigateTo({
					url:'/pages/tabbar/chat/video?url='+e
				})
			},
			// 加载封面
			loadPoster(e){
				console.log('e',e)
				this.poster.w = e.w
			},
			...mapActions(['audioOn','audioEmit','audioOff']),
			// 监听播放音频的全局事件
			onPlayAudio(index){
				// console.log('index',index);
			},
			// 播放音频
			openAudio(){
				// 通知停止其他音频
				store.dispatch('audioEmit', this.index).then()
				if(!this.innerAudioContext){
					this.innerAudioContext = uni.createInnerAudioContext();
					this.innerAudioContext.autoplay = true;
					this.innerAudioContext.src = this.item.data;
					this.innerAudioContext.play()
					//监听播放
					this.innerAudioContext.onPlay(()=>{
						this.audioPlaying = true
					})
					//监听暂停
					this.innerAudioContext.onPause(()=>{
						this.audioPlaying = false
					})
					//监听停止
					this.innerAudioContext.onStop(()=>{
						this.audioPlaying = false
					})
					//监听错误
					this.innerAudioContext.onError(()=>{
						this.audioPlaying = false
					})

				}else{
					this.innerAudioContext.stop()
					this.innerAudioContext.play()
				}
			},
			
			// 预览图片
			preview(url){
				this.$emit('preview',url)
			},
			// 长按事件
			long(e){
				let x = 0;
				let y = 0;
				// #ifndef MP-WEIXIN
				if(Array.isArray(e.changedTouches) && e.changedTouches.length > 0){
					x = e.changedTouches[0].clientX;
					y = e.changedTouches[0].clientY;
				};
				// #endif
				// #ifdef MP-WEIXIN
				x = e.detail.x;
				y = e.detail.y;
				// #endif
				this.$emit('long',x,y,this.index);
			}
		}
	}
</script>

<style>
/*每个页面公共css */
@import '@/common/free.css';
@import '@/common/common.css';
@import '@/common/comicon.css';
@import '@/common/free-icons.css';
	.chat_left_icon{
		left: 80rpx;
		top: 60rpx;
	}
	.chat_right_icon{
		right: 80rpx;
		top: 60rpx;
	}
	.chat-animate{
		opacity: 0;
	}
</style>
